<template>
  <div class="body home">
    <homeHeader/>

    <section class="index-carousel">
      <div id="myCarousel" class="carousel slide" data-interval="false">
        <ol class="carousel-indicators">
          <li
            data-target="#myCarousel"
            :data-slide-to="index"
            :class="index===0?'active':''"
            v-for="(value,index) in banner"
            :key="index"
          ></li>
        </ol>
        <div class="carousel-inner">
          <div
            class="item"
            :class="index===0?'active':''"
            v-for="(value,index) in banner"
            :key="index"
          >
            <div class="clearfix">
              <div class="itemText">
                <h3>{{value.bannerTitle}} 丨 {{value.type}}</h3>
                <p class="itemTexTime">{{value.time}}</p>
                <div class="itemTextBox">
                  <p>{{value.describe}}</p>
                </div>
                <router-link class="itemTexBtn" to="/home">查看详情</router-link>
              </div>
              <div class="itemPic">
                <img src="@/assets/images/cas1.png" alt="First slide" />
              </div>
            </div>
          </div>
        </div>
        <!-- 轮播（Carousel）切换按钮 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <i class="dtFont dtFont-jiantou"></i>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <i class="dtFont dtFont-jiantou-copy"></i>
        </a>
      </div>
    </section>
    <section class="index-ArticleBox center-block">
      <div class="clearfix" style="padding-bottom: 80px">
        <listComponent style="float: left;width: 48.5%;margin-right:3%"
          title="最新通知" :more="{path:'/newList',query:{num:0}}" :data="arr.slice(0, 5)" :prop="{id:'staffId',type:'titleType',time:'thisTime'}" />

        <listComponent style="float: left;width: 48.5%;"
          title="公示公告" :more="{path:'/newList',query:{num:2}}" :data="arr.slice(0, 5)" :prop="{id:'staffId',type:'titleType',time:'thisTime'}" />
      </div>
    </section>

    <section class="index-tab">
      <div class="center-block">
        <h3 class="circular-title">办事大厅</h3>
        <ul class="index-tabTitle clearfix">
          <li
            v-for="(item,index) in tab"
            :class="{'active':nowIndex===index}"
            @mouseover="tabMouseOver(index)"
            :key="index"
          >
            <i :class="`dtFont ${item.icon}`"></i>
            {{item.title}}
          </li>
        </ul>

        <div class="index-tabBody">
          <section class="clearfix" :class="{'active':nowIndex===0}">

            <listComponent class="side"
              :data="arr.slice(0, 5)" :more="{path:'/newList',query:{num:1}}" :prop="{id:'staffId',type:'titleType',placement:'left',time:'thisTime'}" >
              <span slot="title" style="font-size:18px; font-weight:normal" >工作动态</span>
            </listComponent>

            <listComponent class="side margin-right-0"
              :data="arr.slice(0, 5)" :more="{path:'/newList',query:{num:3}}" :prop="{id:'staffId',type:'titleType',placement:'left',time:'thisTime'}" >
              <span slot="title" style="font-size:18px; font-weight:normal">考试资格</span>
            </listComponent>

          </section>
          <section class="clearfix" :class="{'active':nowIndex===1}">

            <div class="side">
              <h3 class="border-title">工程建设审批</h3>
              <ul class="boxSopt clearfix">
                <li>
                  <a href="#" class="yuan r">
                    <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                  </a>
                  <p>立项用地规划许可</p>
                </li>

                <li>
                  <a href="#" class="yuan o">
                    <i class="dtFont dtFont-gongchengjianshexuke"></i>
                  </a>
                  <p>工程建设许可</p>
                </li>

                <li>
                  <a href="#" class="yuan g">
                    <i class="dtFont dtFont-shigongxuke"></i>
                  </a>
                  <p>施工许可</p>
                </li>

                <li>
                  <a href="#" class="yuan b">
                    <i class="dtFont dtFont-jungongyanshou"></i>
                  </a>
                  <p>竣工验收备案</p>
                </li>
              </ul>
            </div>

            <listComponent class="side margin-right-0"
              :data="arr.slice(0, 5)" more="#" :prop="{id:'staffId',type:'titleType',placement:'left',time:'thisTime'}" >
              <span slot="title" style="font-size:18px; font-weight:normal">办事指南</span>
            </listComponent>

          </section>
          <section class :class="{'active':nowIndex===2}">
            <ul class="yuan4S clearfix">
              <li>
                <router-link to="#" class="yuan r">
                  <i class="dtFont dtFont-woyaocha"></i>
                </router-link>
                <p>查办件</p>
              </li>
              <li>
                <router-link to="/dataService/company" class="yuan o">
                  <i class="dtFont dtFont-chaqiye"></i>
                </router-link>
                <p>查企业</p>
              </li>
              <li>
                <router-link to="/dataService/person" class="yuan g">
                  <i class="dtFont dtFont-charenyuan"></i>
                </router-link>
                <p>查人员</p>
              </li>
            </ul>
          </section>
          <section class="clearfix" :class="{'active':nowIndex===3}">

            <listComponent class="side"
              :data="arr.slice(0, 5)" more="#" :prop="{id:'staffId',type:'titleType',placement:'left',time:'thisTime'}" >
              <span slot="title" style="font-size:18px; font-weight:normal">办事指南</span>
            </listComponent>

            <div class="side margin-right-0">
              <h3 class="border-title">热门标签</h3>
              <ul class="hotTag clearfix">
                <li v-for="(item,index) in tag" :key="index">
                  <router-link :to="'/helpCenter?id='+item.id">{{item.title}}</router-link>
                </li>
              </ul>
            </div>
          </section>
        </div>
      </div>
    </section>
    <section class="index-video">
      <h3 class="circular-title center-block">视频新闻</h3>
      <ul class="clearfix index-videoUl center-block">
        <li class="m-video" v-for="(value,index)  in video" :key="index">
          <div class="picBox">
            <img src="@/assets/images/video1.jpg" alt />
            <div class="markCent">
              <img
                :data-a="value.videoSrc"
                @click="playVideo($event)"
                src="@/assets/images/bofang.png"
                alt
              />
            </div>
          </div>
          <div class="textBox">
            <h4>
              <a
                href="javascript:;"
                :data-a="value.videoSrc"
                @click="playVideo($event)"
              >{{value.describe}}</a>
            </h4>
            <p>{{value.time}}</p>
          </div>
        </li>
      </ul>
    </section>
    <gotop/>
  </div>
</template>

<script>
//import getVideo from "@/api/home/palyVideo";
import { getIndexBanner, getIndexList, getIndexVideo } from "@/api/home/home";
// 获取组件
import gotop from "@/components/gotop";
import homeHeader from "./header.vue";
import listComponent  from "@/components/listComponent.vue";
export default {
  name: "home",
  components: { homeHeader, gotop, listComponent },
  data() {
    return {
      banner: [],
      arr: [],
      video: [],
      nowIndex: 0,
      search: "",
      tab: [
        { icon: "dtFont-woyaokan", title: "我要看" },
        { icon: "dtFont-woyaoban", title: "我要办" },
        { icon: "dtFont-chabanjian", title: "我要查" },
        { icon: "dtFont-woyaowen", title: "我要问" }
      ],
      tag : [
        {id:'sadsaf',title:'登录注册'},
        {id:'sadsaf',title:'交通运输厅'},
        {id:'sadsaf',title:'交通运输厅'},
        {id:'sadsaf',title:'通信厅'},
        {id:'sadsaf',title:'通信厅'},
        {id:'sadsaf',title:'公安厅'},
        {id:'sadsaf',title:'交通运输厅'},
        {id:'sadsaf',title:'通信厅'},
        {id:'sadsaf',title:'通信厅'},
        {id:'sadsaf',title:'公安厅'},
      ]
    };
  },
  mounted() {
    this.getIndexList();
    this.getIndexBanner();
    this.getIndexVideo();
  },
  methods: {
    getIndexBanner(id) {
      getIndexBanner(id).then(res => {
        this.banner = res.rows;
      });
    },
    getIndexList(id) {
      getIndexList(id).then(res => {
        this.arr = res.rows;
      });
    },
    getIndexVideo(id) {
      getIndexVideo(id).then(res => {
        /*res.rows.forEach(item=>{
          item.imgSrc = '@'+item.imgSrc
        })*/
        this.video = res.rows;
      });
    },
    tabMouseOver(index) {
      this.nowIndex = index;
    },
    playVideo(e) {
      //getVideo(e.srcElement.dataset.a);
      //getBlackList2()
    },

  }
};
</script>
